<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VoidWood</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="icon" href="./src/assets/void_wood.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .testimonial-card {
            transition: all 0.3s ease;
        }
        
        .testimonial-card:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .highlight-text {
            position: relative;
            display: inline-block;
        }
        
        .highlight-text::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: rgba(56, 189, 248, 0.3);
            z-index: -1;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
          <!-- Logo -->
          <div class="flex items-center">
            <img src="./src/assets/void_logo.png" alt="Logo" class="h-10">
          </div>
      
          <!-- Desktop Menu -->
          <div class="hidden md:flex space-x-8 items-center">
            <a href="#services" class="text-slate-600 hover:text-sky-500 transition-colors">Services</a>
			<a href="translator.html" class="text-slate-600 hover:text-sky-500 transition-colors">EPUB翻译</a>
            <a href="scraper.html" class="text-slate-600 hover:text-sky-500">内容抓取</a>
            <a href="#testimonials" class="text-slate-600 hover:text-sky-500 transition-colors">Testimonials</a>
            <a href="#contact" class="text-slate-600 hover:text-sky-500 transition-colors">Contact</a>
      
            <!-- Free Resources Dropdown -->
            <div class="relative group">
              <button class="text-slate-600 hover:text-sky-500 transition-colors font-medium">
                Free Resources
              </button>
      
              <!-- Dropdown -->
              <div class="absolute right-0 mt-2 w-[600px] bg-white border border-gray-200 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 invisible group-hover:visible transition-all duration-300">
                <div class="grid grid-cols-2 gap-8 p-6">
      
                  <!-- Browse by type -->
                  <div>
                    <h4 class="text-gray-500 text-sm font-semibold mb-4">Browse by type:</h4>
                    <ul class="space-y-3">
                      <li class="flex items-center space-x-2">
                        <span>📝</span>
                        <a href="./articles.html" class="text-gray-800 hover:text-sky-600 font-medium">Articles</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>📗</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Book Notes</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>🎥</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Videos</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>🎙️</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Podcast</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>✉️</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Newsletter</a>
                      </li>
                    </ul>
                  </div>
      
                  <!-- Browse by topic -->
                  <div>
                    <h4 class="text-gray-500 text-sm font-semibold mb-4">Browse by topic:</h4>
                    <ul class="space-y-3">
                      <li class="flex items-center space-x-2">
                        <span>⚙️</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Productivity</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>💻</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">YouTube</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>📚</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Studying</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>💰</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Online Business</a>
                      </li>
                      <li class="flex items-center space-x-2">
                        <span>🛠️</span>
                        <a href="#" class="text-gray-800 hover:text-sky-600 font-medium">Tools & Tech</a>
                      </li>
                      <li class="mt-2">
                        <a href="#" class="text-sky-600 font-semibold underline">all categories →</a>
                      </li>
                    </ul>
                  </div>
      
                </div>
              </div>
            </div>
          </div>
      
          <!-- Mobile Menu Button -->
          <button class="md:hidden text-slate-600">
            <i class="fas fa-bars text-xl"></i>
          </button>
        </div>
      </nav>
      

    <!-- 英雄区域 -->
    <section class="hero-gradient py-20">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <img src="./src/assets/Wla-head.jpg" alt="Alex Napier Holland" class="rounded-full w-64 h-64 object-cover mx-auto md:mx-0 shadow-lg">
                </div>
                <div class="md:w-1/2">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">无用之木</h1>
                    <h2 class="text-2xl md:text-3xl text-sky-600 font-semibold mb-6">AI工程师 长期主义者 创业者</h2>
                    <p class="text-lg text-slate-700 mb-4">
                        技术出身的长期主义创作者，探索写作、投资与知识系统的复利路径。<br>
                        现在，我专注于构建一个属于自己的「复利型创作系统」，希望通过写作、工具、产品和陪伴，持续探索这些问题：
                      </p>
                      
                      <ul class="list-disc pl-6 text-slate-700 space-y-1 text-base mb-6">
                        <li>写作如何成为思考、连接与变现的工具</li>
                        <li>投资和人生的长期主义路径</li>
                        <li>如何打造属于自己的在线资产</li>
                      </ul>
                    
                      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-4">
                        <a href="#contact" class="bg-sky-500 hover:bg-sky-600 text-white font-medium py-3 px-6 rounded-lg transition-colors inline-block">Let's Talk</a>
                        
                        <!-- 社交媒体链接 -->
                        <div class="flex items-center space-x-3">
                            <span class="text-sm text-slate-600">Follow me:</span>

                            <a href="https://www.xiaohongshu.com/user/profile/5b08ab38e8ac2b3cfc49ec73?xsec_token=YB2OFqrndcvwbOGQcstTORJSZsoHOkv85gHmdCkpWB6uc%3D&xsec_source=app_share&xhsshare=CopyLink&appuid=5b08ab38e8ac2b3cfc49ec73&apptime=1752504412&share_id=45a7399c05a34069bde4b546e702039f&share_channel=copy_link" target="_blank" 
                            class="w-8 h-8 bg-red-300 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors group"
                            title="关注我的小红书">
                             <img src="./src/assets/xiaohongshu.svg" alt="小红书" width="16" height="16" 
                                  class="filter brightness-0 invert group-hover:scale-110 transition-transform">
                            </a>

                            <a href="https://www.zhihu.com/people/ltgu-du-de-gua?utm_source=wechat_session&utm_medium=social&utm_oi=1028983052516622336" target="_blank" 
                            class="w-8 h-8 bg-blue-300 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors group"
                            title="关注我的知乎">
                             <img src="./src/assets/zhihu.svg" alt="知乎" width="16" height="16" 
                                  class="filter brightness-0 invert group-hover:scale-110 transition-transform">
                            </a>   

                            <a href="https://mp.weixin.qq.com/s/OvIR-Z2V8IQ7p-3S4S5cOw?token=1455919049&lang=zh_CN" target="_blank" 
                               class="w-8 h-8 bg-green-50 rounded-full flex items-center justify-center hover:bg-green-100 transition-colors group">
                                <i class="fab fa-weixin text-green-600 text-sm group-hover:scale-110 transition-transform"></i>
                            </a>
                            <a href="https://x.com/wenglean1" target="_blank" 
                               class="w-8 h-8 bg-blue-50 rounded-full flex items-center justify-center hover:bg-blue-100 transition-colors group">
                                <i class="fab fa-x-twitter text-blue-400 text-sm group-hover:scale-110 transition-transform"></i>
                            </a>
                            
                            <a href="https://github.com/WengLean" target="_blank" 
                            class="w-8 h-8 bg-gray-50 rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors group">
                             <i class="fab fa-github text-gray-600 text-sm group-hover:scale-110 transition-transform"></i>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 客户评价 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 评价1 -->
                <div class="bg-slate-50 rounded-xl p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2024/08/LEVELS2.jpg" alt="Pieter Levels" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">方舟张</h3>
                            <p class="text-sm text-slate-500">内容型产品人，专注AI与教育工具</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">"木哥教我用Notion和写作系统思考问题，彻底改变了我对‘工具’的定义。"</p>
                    <div class="text-sky-500 font-medium">更聪明的工作方式 →</div>
                </div>
                
                <!-- 评价2 -->
                <div class="bg-slate-50 rounded-xl p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2023/08/IMG_5240.jpg" alt="Jason Cunden" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">杨念辰</h3>
                            <p class="text-sm text-slate-500">连续创业者，财经内容创作者</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">“跟他聊了一个小时写作系统，我直接上手搭建了自己的创作资产库。”</p>
                    <div class="text-sky-500 font-medium">开始构建资产 →</div>
                </div>
                
                <!-- 评价3 -->
                <div class="bg-slate-50 rounded-xl p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2023/08/oF5m4hnv.jpeg" alt="Ikenna Okoroafor" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">Luyao Li</h3>
                            <p class="text-sm text-slate-500">AI开发者，编程博主</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">“我原来只是写代码的人。木哥让我意识到，技术人也能拥有影响力。”</p>
                    <div class="text-sky-500 font-medium">让技术变现 →</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务 -->
    <section id="services" class="py-16 bg-slate-50">
        <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">我的服务</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 服务 1 -->
            <div class="bg-white rounded-xl p-8 shadow-sm card-hover flex flex-col justify-between">
            <img src="https://cdn-icons-png.flaticon.com/512/3771/3771527.png" alt="Blueprint" class="w-20 h-20 mx-auto mb-6">
            <h3 class="text-xl font-semibold text-center mb-4">知识系统 Blueprint</h3>
            <p class="text-slate-600 text-center mb-6">
                一套详细的「长期主义创作系统」搭建方案，包含：<br>
                • 系统结构图（Figma / Notion）<br>
                • 内容生产流程<br>
                • 工具推荐清单<br>
                • 在线资产布局策略<br>
                <span class="block mt-4">形式：PDF + Notion 模板</span>
            </p>
            <div class="mt-auto text-center">
                <span class="text-sky-500 font-bold text-lg">￥300 RMB</span>
            </div>
            </div>
    
            <!-- 服务 2 -->
            <div class="bg-white rounded-xl p-8 shadow-sm card-hover flex flex-col justify-between">
            <img src="https://cdn-icons-png.flaticon.com/512/2991/2991108.png" alt="Digital Store" class="w-20 h-20 mx-auto mb-6">
            <h3 class="text-xl font-semibold text-center mb-4">数字产品商店</h3>
            <p class="text-slate-600 text-center mb-6">
                购买或订阅我的数字产品，包括：<br>
                • Notion 模板（创作日历、投资笔记）<br>
                • 创作选题库<br>
                • 写作 SOP 流程<br>
                • 个人知识库结构
            </p>
            <div class="mt-auto text-center">
                <span class="text-sky-500 font-bold text-lg">￥99 RMB</span>
            </div>
            </div>
    
            <!-- 服务 3 -->
            <div class="bg-white rounded-xl p-8 shadow-sm card-hover flex flex-col justify-between">
            <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Creator OS Club" class="w-20 h-20 mx-auto mb-6">
            <h3 class="text-xl font-semibold text-center mb-4">Creator OS 社群</h3>
            <p class="text-slate-600 text-center mb-6">
                加入长期主义创作者社群，享受：<br>
                • 每月主题分享<br>
                • 投资与创作案例拆解<br>
                • 系统搭建工作坊<br>
                • 社群互助与反馈
            </p>
            <div class="text-center">
                <span class="text-sky-500 font-bold text-lg">￥1999 RMB</span>
            </div>
            </div>
        </div>
    
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
            <!-- 服务 4 -->
            <div class="bg-white rounded-xl p-8 shadow-sm card-hover flex flex-col justify-between">
            <img src="https://cdn-icons-png.flaticon.com/512/4139/4139981.png" alt="Collaboration" class="w-20 h-20 mx-auto mb-6">
            <h3 class="text-xl font-semibold text-center mb-4">联名与授权合作</h3>
            <p class="text-slate-600 text-center mb-6">
                与我一起打造长期主义作品：<br>
                • 联名制作 Notion 模板或课程<br>
                • 合作电子书或出版物<br>
                • 发布付费 newsletter 联名专题<br>
                • 授权我的系统给你的社群
            </p>
            <div class="text-center">
                <span class="text-sky-500 font-bold text-lg">价格面议</span>
            </div>
            </div>
    
            <!-- 服务 5 -->
            <div class="bg-white rounded-xl p-8 shadow-sm card-hover flex flex-col justify-between">
            <img src="https://cdn-icons-png.flaticon.com/512/3313/3313893.png" alt="Handbook" class="w-20 h-20 mx-auto mb-6">
            <h3 class="text-xl font-semibold text-center mb-4">长期主义者手册</h3>
            <p class="text-slate-600 text-center mb-6">
                一本关于长期主义的电子书，聚焦：<br>
                • 技术人与写作的结合<br>
                • 长期主义投资思维<br>
                • 在线资产打造<br>
                • 创作系统复利
            </p>
            <div class="text-center">
                <span class="text-sky-500 font-bold text-lg">价格待定</span>
            </div>
            </div>
    
            <!-- 服务 6 -->
            <div class="bg-white rounded-xl p-8 shadow-sm card-hover flex flex-col justify-between">
            <img src="https://cdn-icons-png.flaticon.com/512/3050/3050525.png" alt="Product Studio" class="w-20 h-20 mx-auto mb-6">
            <h3 class="text-xl font-semibold text-center mb-4">产品工作室</h3>
            <p class="text-slate-600 text-center mb-6">
                探索我开发的写作工具、知识管理产品，或定制你的个人在线资产。
            </p>
            <div class="text-center">
                <a href="#" class="text-sky-500 font-medium">了解更多 →</a>
            </div>
            </div>
        </div>
        </div>
    </section>
  

    <!-- 更多评价 -->
    <section id="testimonials" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">他们这样说</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 评价1 -->
                <div class="bg-slate-50 rounded-xl p-6 testimonial-card">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2023/08/Tomas.png" alt="Tomás Gutiérrez Meoz" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">李珊</h3>
                            <p class="text-sm text-slate-500">知识型博主</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">"我一直想把写作当成事业，但总觉得很碎片。木哥的系统让我第一次有了‘创作资产’的概念，也清楚该怎么把文章、读书笔记和投资笔记整合在一起。对我这种同时想做内容和投资的人，太有帮助了。"</p>
                </div>
                
                <!-- 评价2 -->
                <div class="bg-slate-50 rounded-xl p-6 testimonial-card">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2023/08/Khalid.png" alt="Khalid Hamadeh" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">David Chen</h3>
                            <p class="text-sm text-slate-500">产品经理</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">"以前我对投资很焦虑，觉得自己总是跟不上节奏。木哥的方法让我明白：投资也是一个系统，可以像工程师写代码一样优化和管理，而不是情绪化的买卖。"</p>
                </div>
                
                <!-- 评价3 -->
                <div class="bg-slate-50 rounded-xl p-6 testimonial-card">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2023/08/Conor.png" alt="Conor Wade" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">Grace Wu</h3>
                            <p class="text-sm text-slate-500">自媒体创业者</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">"我最喜欢的是他把‘写作’变成了一种可以复制和放大的流程。再也不是凭感觉写文章，而是能持续积累价值。"</p>
                </div>
                
                <!-- 评价4 -->
                <div class="bg-slate-50 rounded-xl p-6 testimonial-card">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2024/11/Nils-Kattau.png" alt="Nils Kattau" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">Jason Lin</h3>
                            <p class="text-sm text-slate-500">创业者</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">"我一直觉得自己时间不够用。木哥的长期主义理念让我彻底改变：不是拼命忙，而是先搭建系统，让系统帮我省时间、放大成果。"</p>
                </div>
                
                <!-- 评价5 -->
                <div class="bg-slate-50 rounded-xl p-6 testimonial-card">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2024/11/Navneet-web.png" alt="Navneet Lekshminarayanan" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">孙晨</h3>
                            <p class="text-sm text-slate-500">独立开发者</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">"对技术人来说，最痛苦的是不知道怎么把自己的专长变成可持续的收入。木哥的内容让我学会了怎么用写作、投资、产品，把技术变成资产。"</p>
                </div>
                
                <!-- 评价6 -->
                <div class="bg-slate-50 rounded-xl p-6 testimonial-card">
                    <div class="flex items-center mb-4">
                        <img src="https://alexnapierholland.com/wp-content/uploads/2024/11/Danny-Ho.png" alt="Danny Ho" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">王曜</h3>
                            <p class="text-sm text-slate-500">内容战略顾问, 社群主理人</p>
                        </div>
                    </div>
                    <p class="text-slate-700 mb-4 italic">"木哥帮我把『写作 + 社群 + 产品』连成一体。他是那种能把复杂事物讲明白的人。和他合作，不只是得到答案，更是学会了系统思考。"</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 微信联系部分 -->
    <section id="contact" class="py-16 bg-slate-50">
        <div class="container mx-auto px-4 max-w-4xl">
            <div class="bg-white rounded-xl shadow-sm p-8">
                <h2 class="text-3xl font-bold text-center mb-8">📬 想获取更多内容？欢迎添加我的微信</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <!-- 左侧：微信二维码 -->
                    <div class="text-center">
                        <div class="bg-gray-100 w-64 h-64 mx-auto rounded-lg flex items-center justify-center mb-4">
                            <div class="text-center">
                                <!-- 给父容器一个具体的尺寸，防止图片过大 -->
                                <div class="bg-gray-100 w-64 h-64 mx-auto rounded-lg flex items-center justify-center mb-4">
                                    <img src="./src/assets/wechat.jpeg" alt="微信二维码" class="max-w-full max-h-full object-scale-down">
                                </div>
                                <!-- <p class="text-gray-500 text-sm">微信二维码</p>
                                <p class="text-gray-600 font-medium">VoidWood</p> -->
                            </div>
                        </div>
                        <p class="text-lg text-slate-600 mb-2">
                            添加我微信「<strong class="text-sky-600">无用之木</strong>」
                        </p>
                        <p class="text-sm text-slate-500">
                            即可领取 Notion 写作系统模板、科研卡片地图等资源，并加入创作者交流群。
                        </p>
                    </div>
                    
                    <!-- 右侧：福利清单 -->
                    <div>
                        <h3 class="text-xl font-semibold mb-6 text-slate-800">你将获得：</h3>
                        <div class="space-y-4">
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-1">
                                    <i class="fas fa-check text-green-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-slate-800">赠送：写作结构模板</h4>
                                    <p class="text-sm text-slate-600">我正在使用的 Notion 写作系统模板，包含文章结构、选题库、发布流程等</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mt-1">
                                    <i class="fas fa-users text-blue-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-slate-800">免费加入：创作者小群</h4>
                                    <p class="text-sm text-slate-600">与其他长期主义创作者交流，分享经验，互相激励成长</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mt-1">
                                    <i class="fas fa-bell text-purple-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-slate-800">获取我每周更新内容</h4>
                                    <p class="text-sm text-slate-600">第一时间收到我的最新文章、思考和工具推荐</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center mt-1">
                                    <i class="fas fa-gift text-yellow-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-slate-800">独家：投资笔记框架</h4>
                                    <p class="text-sm text-slate-600">我的个人投资决策和复盘框架，仅在微信群分享</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-8 p-4 bg-sky-50 rounded-lg">
                            <p class="text-sm text-sky-700 text-center">
                                <i class="fas fa-info-circle mr-2"></i>
                                扫码添加后，回复「创作系统」即可获取所有资源
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- 页脚 -->
    <footer class="bg-slate-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <img src="./src/assets/void_logo.png" alt="Logo" class="h-8">
                </div>
                
                <!-- 社交媒体链接 -->
                <div class="flex items-center space-x-4 mb-4 md:mb-0">
                    <a href="https://www.xiaohongshu.com/user/profile/5b08ab38e8ac2b3cfc49ec73?xsec_token=YB2OFqrndcvwbOGQcstTORJSZsoHOkv85gHmdCkpWB6uc%3D&xsec_source=app_share&xhsshare=CopyLink&appuid=5b08ab38e8ac2b3cfc49ec73&apptime=1752504412&share_id=45a7399c05a34069bde4b546e702039f&share_channel=copy_link" target="_blank" 
                    class="w-10 h-10 bg-slate-700 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors group">
                     <img src="./src/assets/xiaohongshu.svg" alt="小红书" width="20" height="20" 
                          class="filter brightness-0 invert group-hover:scale-110 transition-transform">
                 </a>
                 <a href="https://www.zhihu.com/people/ltgu-du-de-gua?utm_source=wechat_session&utm_medium=social&utm_oi=1028983052516622336" target="_blank" 
                    class="w-10 h-10 bg-slate-700 rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors group">
                     <img src="./src/assets/zhihu.svg" alt="知乎" width="20" height="20" 
                          class="filter brightness-0 invert group-hover:scale-110 transition-transform">
                 </a>
                    <a href="https://mp.weixin.qq.com/s/OvIR-Z2V8IQ7p-3S4S5cOw?token=1455919049&lang=zh_CN" target="_blank" 
                    class="w-10 h-10 bg-slate-700 rounded-full flex items-center justify-center hover:bg-green-500 transition-colors group">
                        <i class="fab fa-weixin text-white group-hover:scale-110 transition-transform"></i>
                    </a>
                    <a href="https://x.com/wenglean1" target="_blank" 
                    class="w-10 h-10 bg-slate-700 rounded-full flex items-center justify-center hover:bg-blue-400 transition-colors group">
                        <i class="fab fa-x-twitter text-white group-hover:scale-110 transition-transform"></i>
                    </a>
                    <a href="https://github.com/WengLean" target="_blank" 
                    class="w-10 h-10 bg-slate-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors group">
                        <i class="fab fa-github text-white group-hover:scale-110 transition-transform"></i>
                    </a>
                </div>
                
                <div class="text-sm text-slate-400 text-center md:text-right">
                    <p>© 2025 VoidWood. All rights reserved.</p>
                    <p class="mt-2">Created by VoidWood</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 移动端菜单切换
        const menuButton = document.querySelector('button.md\\:hidden');
        const navLinks = document.querySelector('.md\\:flex');
        
        menuButton.addEventListener('click', function() {
            navLinks.classList.toggle('hidden');
        });
    </script>
</body>
</html>